/****总容器****/
.wrapper{
    width:100%;
    height:100%;
}
body{
    display: block;
    margin: 0;
}
    ul {
    padding: 0;
    margin: 0;
}
/***search***/
.wrapper .search {
    width: 100%;
    height: 13vw;
    background-color: white;
}

.wrapper .search .search-fixed-top {
    width: 100%;
    height: 13vw;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.wrapper .search .search-fixed-top .search-box {
    width: 95%;
    height: 9vw;
    background-color: #f2f2f2;
    border-radius: 2px;
    display: flex;
    align-items: center;
    font-family: "宋体";
    font-size: 3.5vw;
    font-size: 3.5vw;
    color: darkgrey;
    user-select: none;
}


.wrapper .search .search-fixed-top .search-box .icon-zhaoxiangji {
    margin-left: auto;
    margin-right: 1vw;
}

.wrapper .search .search-fixed-top .search-box span {
    flex: 1;
    text-align: center;
}
/***推荐列表部分***/
.wrapper .activitytype {
    display: flex;
    list-style-type: none; /* 移除列表项默认的圆点 */
    padding: 0; /* 移除默认的内边距 */
    background-color: white;
}

.wrapper .activitytype li {
    width: 18vw;
    height: 6vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;


    margin-right: 1vw; /* 可选：增加间距以区分每个推荐项 */
}
.wrapper .activitytype li:first-child {
    border-bottom: 2px solid indianred; /* 第一个推荐项的底部边框 */
    margin-bottom: 0; /* 可选：增加底部边框与下一个推荐项之间的间距 */
    width: 10%;
    margin-left: 2vw;

}
.wrapper .activitytype li p{
    font-size: 3.2vw;
    color: #666;
    width: auto;

}
/***横幅广告部分***/
.wrapper .activity-list {
    width: 100%;
    height: 20vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;

    border-top: 5px solid #f2f2f2;
    border-bottom: 5px solid #f2f2f2;

}

.wrapper .activity .activity-list li {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 水平居中文本 */

}

.wrapper .activity .activity-list li img {
    width: 7vw;
    height: 7.5vw;
    margin-right: auto; /* 调整右侧间距 */
    margin-left: 1vw;
    margin-top: 1vw; /* 调整顶部间距 */
}

.wrapper .activity .activity-list li p {
    font-size: 3.2vw;
    color: #666;
    margin-top: 1.5vw; /* 调整段落与图像之间的间距 */
    margin-bottom: 1vw; /* 调整段落与下方内容的间距 */
    margin-left: -1.5vw;
}
.wrapper .advertising{
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
.wrapper .ddmc{
    width: 50%;
    height: 30vw;
    border-bottom: 5px solid #f2f2f2;
    border-left: 5px solid #f2f2f2;
    border-right: 5px solid #f2f2f2;
    margin-top: 0;
}
.wrapper .ddmc .info {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
}
.wrapper .ddmc .info .left-info{
    display: flex;
    align-items: center;
    width: 70%;
}
.wrapper .ddmc .info .left-info img{
    width: 5vw;
    height: 5vw;
    margin-left: 2vw;
    margin-top: 0.5vw; /* 调整顶部间距 */
    margin-right: 0;
}
.wrapper .ddmc .info .left-info p{
    font-size: 3.8vw;
    color: black;
    font-weight: bold;
    font-style: normal;

    margin-top: 0; /* 调整段落与下方内容的间距 */
    margin-left: 2vw;
}
.wrapper .ddmc .info .right-info{
    display: flex;
    align-items: center;

}
.wrapper .ddmc .info .right-info p{
    font-size: 3.2vw;
    font-style: normal;
    margin-left: auto;
    margin-right: 1vw;
}
.wrapper .ddmc .ddmc-info{
    width: 100%;
    height: 20vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    margin-top: 0;
}
.wrapper .ddmc .ddmc-info li{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 水平居中文本 */
}
.wrapper .ddmc .ddmc-info li img{
    width: 13vw;
    height: 12vw;
    margin-right: auto; /* 调整右侧间距 */
    margin-left: 1vw;
    margin-top: 0; /* 调整顶部间距 */
}
.wrapper .ddmc .ddmc-info li p{
    font-size: 3.5vw;
    color: #666;
    margin-top: 1.5vw; /* 调整段落与图像之间的间距 */
    margin-bottom: 1vw; /* 调整段落与下方内容的间距 */
    margin-left: -1.5vw;
    color:red;
}
.wrapper .bybt{
    width: 50%;
    height: 30vw;
    border-bottom: 5px solid #f2f2f2;
    border-right: 5px solid #f2f2f2;
    margin-top: 0;
}
.wrapper .bybt .info {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
}
.wrapper .bybt .info .left-info{
    display: flex;
    align-items: center;
    width: 70%;
}
.wrapper .bybt .info .left-info img{
    width: 5vw;
    height: 5vw;
    margin-left: 2vw;
    margin-top: 0.5vw; /* 调整顶部间距 */
    margin-right: 0;
}
.wrapper .bybt .info .left-info p{
    font-size: 3.8vw;
    color: black;
    font-weight: bold;
    font-style: normal;

    margin-top: 0; /* 调整段落与下方内容的间距 */
    margin-left: 2vw;
}
.wrapper .bybt .info .right-info{
    display: flex;
    align-items: center;

}
.wrapper .bybt .info .right-info p{
    font-size: 3.2vw;
    font-style: normal;
    margin-left: auto;
    margin-right: 1vw;
}
.wrapper .bybt .bybt-info{
    width: 100%;
    height: 20vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    margin-top: 0;
}
.wrapper .bybt .bybt-info li{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 水平居中文本 */
}
.wrapper .bybt .bybt-info li img{
    width: 13vw;
    height: 12vw;
    margin-right: auto; /* 调整右侧间距 */
    margin-left: 1vw;
    margin-top: 0; /* 调整顶部间距 */
}
.wrapper .bybt .bybt-info li p{
    font-size: 3.5vw;
    color: #666;
    margin-top: 1.5vw; /* 调整段落与图像之间的间距 */
    margin-bottom: 1vw; /* 调整段落与下方内容的间距 */
    margin-left: -1.5vw;
    color:red;
}
.wrapper .commodity{
    width: 100%;
    height: auto;

    display: flex;

    justify-content: space-between;
    align-content: center;

    margin-top: 0;
}

.wrapper .commodity .left{
    width: 50%;
    height: 70%;
    border-right: 5px solid #f2f2f2;
    border-top: 5px solid #f2f2f2;
    border-bottom: 4px solid #f2f2f2;


    margin-bottom: 0;
    margin-top: 0;
}
.wrapper .commodity .left img{
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    border-radius: 2.5px;

}
.wrapper .commodity .left .left-info1{
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 1vw;
    margin-bottom: 1vw;
}
.wrapper .commodity .left .left-info1 h3{
    font-size: 3vw;
    height: auto;
    font-family: "方正姚体";
    background-color: coral;
    color:white;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 1vw;
}
.wrapper .commodity .left .left-info1 p{
    font-size: 4vw;
    margin-right: auto;
    margin-left: 2.5vw;
    font-weight: 600;
}
.wrapper .commodity .left .left-info2{
    display: flex;
    justify-content: left;
    align-content: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}
.wrapper .commodity .left .left-info2 .icon-jisufu_xianyonghoufulogo{
    font-size: 3.5vw;
    color: #38CA73;
    height: auto;

}
.wrapper .commodity .left .left-info2 p{
    font-size: 3.5vw;
}
.wrapper .commodity .left .left-info3{
    display: flex;
    justify-content: center;
    align-content: space-between;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.wrapper .commodity .left .left-info3 .p1{
    font-size: 3.8vw;

}
.wrapper .commodity .left .left-info3 .p1 .larger{
    font-size: 3.8vw;

}
.wrapper .commodity .left .left-info3 .p1 .smaller{
    font-size: 3.2vw;
}
.wrapper .commodity .left .left-info3 p{
    font-size: 3.5vw;
    color: #AAAAAA;
    margin-left: 1vw;
}
.wrapper .commodity .right{
    width: 50%;
    height: 70%;
    border-right: 5px solid #f2f2f2;
    border-top: 5px solid #f2f2f2;
    border-bottom: 4px solid #f2f2f2;


    margin-bottom: 0;
    margin-top: 0;
}
.wrapper .commodity .right img{
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    border-radius: 2.5px;

}
.wrapper .commodity .right .right-info1{
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 1vw;
    margin-bottom: 1vw;
}
.wrapper .commodity .right .right-info1 h3{
    font-size: 3vw;
    font-family: "方正姚体";
    background-color: coral;
    color:white;
    display: flex;
    justify-content: center;
    align-content: center;
}
.wrapper .commodity .right .right-info1 p{
    font-size: 4vw;
    margin-right: auto;
    margin-left: 0;
    font-weight: 600;
}
.wrapper .commodity .right .right-info2{
    display: flex;
    justify-content: left;
    align-content: space-between;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.wrapper .commodity .right .right-info2 p{
    font-size: 3.5vw;
}
.wrapper .commodity .right .right-info3{
    display: flex;
    justify-content:space-between;
    align-content: center;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.wrapper .commodity .right .right-info3 .p1{
    font-size: 3.8vw;
}
.wrapper .commodity .right .right-info3 .p1 .larger{
    font-size: 3.8vw;
}
.wrapper .commodity .right .right-info3 .p1 .smaller{
    font-size: 3.2vw;
}
.wrapper .commodity .right .right-info3 p{
    font-size: 3.5vw;
    color: #AAAAAA;
}

/***底部菜单部分***/
.wrapper .footer{
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wrapper .footer li .icon-shouyexuanzhong-copy{
    font-size: 5vw;

}
.wrapper .footer li .icon-shipin{
    font-size: 5vw;
    position: relative;
}
.wrapper .footer li .icon-liaotianjilu{
    font-size: 5vw;
    position: relative;
}

.wrapper .footer li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    user-select: none;
    cursor: pointer;
    position: relative;
}
.wrapper .footer li img{
    width: 6vw;
    height: 4vw;
}
.wrapper .footer li p{
    font-size: 2.8vw;
}
.wrapper .footer li i{
    font-size: 5vw;
}
.wrapper .footer .icon-quantity {
     width: 4.2vw;
     height: 4.2vw;
     border-radius: 50%; /* 使其呈现圆形 */
     background-color: red;
     color: #fff;
     font-size: 2vw; /* 调整字体大小 */

     display: flex;
     justify-content: center;
     align-items: center;

     position: absolute;
     right: -1.5vw; /* 调整右侧偏移量 */
     top: -1.5vw; /* 调整顶部偏移量 */
 }